{include file="public/head"}

<body>
    <div class="subject">
        <div class="subject-h">科目选择</div>
        <div class="subject-list">
            <!-- <div class="subject-item subject-item-active">科目一</div>
            <div class="subject-item">科目二</div>
            <div class="subject-item">科目三</div>
            <div class="subject-item">科目四</div> -->
        </div>
    </div>
    <div class="phototype">
        <div class="phototype-h">照型选择</div>
        <div class="phototype-list">
            <!-- <div class="phototype-item phototype-item-active">大车B2</div>
                <div class="phototype-item">小车自动挡C1</div>
                <div class="phototype-item">小车手动挡C2</div> -->
        </div>
    </div>
    <div style="height: 1.2rem;"></div>
    <div class="footer">
        <div class="flex-center price"><i>￥</i>
            <p>00</p>
        </div>
        <div class="flex-center zaixian">
            <a href="/index/mackup/mackupSure">在线缴费</a>
        </div>
        <div class="none" style="display: none; flex:1; text-align:center;">暂未开启</div>
    </div>
    <script src="__STATIC__/home/js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
    <script src="__STATIC__/home/js/public.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function () {
            // 切换科目
            $(document).on('click', '.subject-item', function () {
                $('.subject-item-active').removeClass('subject-item-active');
                $(this).addClass('subject-item-active');
                examTypeData();
            });
            // 切换照型
            $(document).on('click', '.phototype-item', function () {
                $('.phototype-item-active').removeClass('phototype-item-active');
                $(this).addClass('phototype-item-active');
                examTypeData();
            });
            // 补考类型
            $.ajax({
                type: 'post',
                url: '/index/Makeupapi/makeClass',
                success(res) {
                    if (res.code == 1) {
                        var classType = res.data.classType || [];
                        var classTypeHtml = '';
                        classType.forEach(function (item, index) {
                            var active = index == 0 ? "subject-item-active" : '';
                            classTypeHtml += `<div class="subject-item ${active}" data-id="${item.id}">${item.class_name}</div>`;
                        });
                        var driverType = res.data.driverType || [];
                        var driverTypeHtml = '';
                        $('.subject-list').html(classTypeHtml);
                        driverType.forEach(function (item, index) {
                            var active = index == 0 ? "phototype-item-active" : '';
                            driverTypeHtml += `<div class="phototype-item ${active}" data-id="${item.id}">${item.name}</div>`;
                        });
                        $('.phototype-list').html(driverTypeHtml);
                        examTypeData();
                    }
                },
                error() {
                    alert('补考类型接口错误');
                }
            });

            // 补考类型价格

            function examTypeData() {
                var c_id = $('.subject-item-active').attr('data-id');
                var d_id = $('.phototype-item-active').attr('data-id');
                $.ajax({
                    type: 'post',
                    url: '/index/Makeupapi/examTypeData',
                    data: {
                        c_id,
                        d_id
                    },
                    success(res) {
                        if (res.code == 1) {
                            if (!res.data) {
                                $('.footer .price').hide();
                                $('.footer .zaixian').hide();
                                $('.footer .none').show();
                                return false;
                            }
                            $('.footer .price').show();
                            $('.footer .zaixian a').attr('href', `/index/mackup/mackupSure?id=${res.data && res.data.id}`);
                            $('.footer .zaixian').show();
                            $('.footer .none').hide();
                            $('.footer .price p').text(res.data.price);
                        }
                    },
                    error() {
                        alert('补考类型价格');
                    }
                });
            };
        });
    </script>
</body>

</html>